 <template>
  <div class="b-s swich-ct bd">
    <div
      :class="['s-item',iSelected===index?'selected':'']"
      v-for="(item,index) in aInnerName"
      :key="index"
      @click="changeTab(index)"
    >{{item}}</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      iSelected: 0,
      aInnerName: ['缴纳', '不缴']
    }
  },
  props: ['aName', 'iType', 'selected'],
  watch: {
    // iCurrent: function (val) {},
    // $route (to, from) {}
  },
  created () {
    if (Array.isArray(this.aName)) {
      this.aInnerName = this.aName
    }
    this.iSelected = this.selected || 0
  },
  mounted () {
  },
  methods: {
    /**
     * 切换顶部tab
     */
    changeTab (sIndex) {
      this.iSelected = sIndex
      this.$emit('changeTab', sIndex, this.iType)
    },
    /**
     * 切换箭头指向
     */
    fTransArr () {
      console.log('cheng arror--------')
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/style/mixin";
.b-s {
  box-sizing: border-box;
}
.flex-c {
  display: flex;
  align-items: center;
}
.swich-ct {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  border-radius: cmSize(8);
  .s-item {
    height: 100%;
    flex: 1 1 cmSize(100);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .selected {
    background: #69c16a;
    color: #ffffff;
  }
}
</style>
